@import './theme.less';

// Ant Design 组件样式重写
.ant-layout {
  background: @bg-secondary;
}

// 强制更改 ant-pro-layout-content 样式
.ant-pro-layout .ant-pro-layout-content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background-color: transparent !important;
  position: relative !important;
  padding-block: 0px !important;
  padding-inline: 20px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  
  // 在较小屏幕上调整
  @media (max-width: 1600px) {
    max-width: 1200px !important;
    padding-inline: 20px !important;
  }
  
  @media (max-width: 1200px) {
    max-width: 100% !important;
    padding-inline: 20px !important;
  }
  
  @media (max-width: 768px) {
    padding-inline: 16px !important;
  }
}

.ant-layout-header {
  background: @bg-primary;
  box-shadow: @shadow-sm;
  border-bottom: 1px solid @border-light;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 100;
}

// 科技感侧边栏样式 - 统一风格
// 科技感侧边栏样式 - 最高优先级
.ant-pro-layout .ant-layout .ant-layout-sider,
.ant-pro-layout .ant-layout-sider,
.ant-layout .ant-layout-sider,
body .ant-layout-sider {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%) !important;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
  
  // 添加粒子背景动画
  &::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
      radial-gradient(1px 1px at 20px 30px, rgba(102, 126, 234, 0.4), transparent),
      radial-gradient(1px 1px at 40px 70px, rgba(118, 75, 162, 0.3), transparent),
      radial-gradient(1px 1px at 90px 40px, rgba(82, 196, 26, 0.2), transparent),
      radial-gradient(1px 1px at 130px 80px, rgba(250, 173, 20, 0.2), transparent) !important;
    background-repeat: repeat !important;
    background-size: 200px 150px !important;
    animation: sider-particles 20s linear infinite !important;
    opacity: 0.6 !important;
    z-index: 0 !important;
  }
  
  // 添加网格覆盖
  &::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
      linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    animation: sider-grid-move 12s linear infinite !important;
    z-index: 0 !important;
  }
}

// 科技感菜单样式 - 最高优先级
.ant-pro-layout .ant-menu,
.ant-layout .ant-menu,
body .ant-menu {
  background: transparent !important;
  border: none !important;
  padding: 16px 0 !important;
  position: relative !important;
  z-index: 2 !important;
  
  .ant-menu-item {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    margin: 4px 8px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    
    // 左侧指示条
    &::before {
      content: '' !important;
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      width: 3px !important;
      height: 100% !important;
      background: linear-gradient(180deg, #667eea 0%, #764ba2 100%) !important;
      transform: scaleY(0) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      z-index: 1 !important;
    }
    
    // 悬停效果
    &:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      border-color: rgba(102, 126, 234, 0.3) !important;
      transform: translateX(6px) !important;
      box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2) !important;
      
      &::before {
        transform: scaleY(0.8) !important;
      }
      
      .ant-menu-title-content {
        color: rgba(255, 255, 255, 0.9) !important;
      }
      
      .anticon {
        color: #667eea !important;
        transform: scale(1.1) !important;
        filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.6)) !important;
      }
    }
    
    // 选中状态
    &.ant-menu-item-selected {
      background: rgba(255, 255, 255, 0.08) !important;
      border-color: rgba(102, 126, 234, 0.5) !important;
      color: white !important;
      transform: translateX(8px) !important;
      box-shadow: 0 6px 25px rgba(102, 126, 234, 0.25) !important;
      
      &::before {
        transform: scaleY(1) !important;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #52c41a 100%) !important;
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.5) !important;
      }
      
      .ant-menu-title-content {
        color: white !important;
        font-weight: 600 !important;
        text-shadow: 0 0 10px rgba(102, 126, 234, 0.5) !important;
      }
      
      .anticon {
        color: #667eea !important;
        transform: scale(1.15) !important;
        filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.8)) !important;
      }
    }
  }
}

// 添加动画关键帧
@keyframes sider-particles {
  0% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-30px) translateX(15px); }
  50% { transform: translateY(-60px) translateX(0px); }
  75% { transform: translateY(-90px) translateX(-15px); }
  100% { transform: translateY(-120px) translateX(0px); }
}

@keyframes sider-grid-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

@keyframes border-pulse {
  0% { opacity: 0.6; transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(1.02); }
}

@keyframes logo-line-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.1); }
}

// 其他组件样式保持不变
.ant-card {
  border-radius: @radius-lg;
  box-shadow: @shadow-md;
  border: 1px solid @border-light;
  transition: @transition-base;
  
  &:hover {
    box-shadow: @shadow-lg;
    transform: translateY(-2px);
  }
  
  .ant-card-head {
    border-bottom: 1px solid @border-light;
    
    .ant-card-head-title {
      color: @text-primary;
      font-weight: 600;
    }
  }
}

.ant-btn {
  border-radius: @radius-md;
}